<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>红塘湾首页</title>
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
<!--页面顶部-->
<header class="clearfix">
    <!--居中显示-->
    <div class="center">
        <div class="right">
            <a href="#"><img src="images/phone.png" alt="联系">
            </a><a href="#"><img id="search" src="images/search.png" alt="搜索"></a>
            <a href="#">会员登录 / </a>
            <a href="#">注册</a>
        </div>
        <!--logo部分-->
        <div class="logo">
            <p>红塘湾建国度假酒店 HONGTANGWAN JIANGUO DUJIAN JIUDIAN</p>
        </div>
    </div>
</header>
<!--轮播图部分-->
<section class="banner">
    <img src="images/banner.jpg" alt="">
    <!--表单部分-->
    <!--TODO form表单的样式还是有一些问题，需要修改-->
    <form action="http://www.baidu.com" method="get">
        <fieldset>
            <legend>房间预订</legend>
            <input required="" type="text" placeholder="到店日期" onfocus="(this.type='date')"/>
            <input required="" type="text" placeholder="离店日期" onfocus="(this.type='date')"/>
            <select>
                <option name="roomType" id="1">单人间</option>
                <option name="roomType" id="2">双人间</option>
                <option name="roomType" id="3">三人间</option>
            </select>
            <input type="number" name="roomNum" min="1" max="10" placeholder="房间数量" step="1">
            <input type="button" value="查看">
        </fieldset>
    </form>
</section>
<!--导航栏部分-->
<nav class="clearfix">
    <div class="center">
        <ul>
            <li style="margin-left: 36px;">
                酒店概述
                <a href="#"><img style="margin-left: 11px;margin-right: 88px" src="images/icon01.png" alt=""></a>
            </li>
            <li style="margin-right: 78px">
                套房
            </li>
            <li>
                餐饮及康乐
                <a href="#"><img style="margin-left: 15px;margin-right: 80px" src="images/icon01.png" alt=""></a>
            </li>
            <li>
                限时特惠
                <a href="#"><img style="margin-left: 16px;margin-right: 78px" src="images/icon01.png" alt=""></a>
            </li>
            <li>
                预定
            </li>
            <li style="margin-left: 73px;">
                会员中心
                <a href="#"><img style="margin-left: 12px" src="images/icon01.png" alt=""></a>
            </li>
        </ul>
    </div>
</nav>
<!--热点图-->
<section class="hotelNews clearfix">
    <div class="center">
        <div class="title">
            <h3>Hotel News</h3>
            酒店新闻
        </div>
        <div class="banner">
            <a href="#"><img class="left_botter" src="images/leftbotter.png" alt=""></a>
            <a href="#"><img src="images/banner01.jpg" alt=""></a>
            <a href="#"><img class="right_botter" src="images/rightbotter.png" alt=""></a>
            <div class="SubTitle">
                <span>与小企业和社会公众之间信息交流的有效载体</span>
                <a class="botter" href="#">查看更多 》</a>
            </div>
        </div>
    </div>
</section>
<!--限时特惠-->
<section class="Limited_time clearfix">
    <div class="center">
        <div class="title">
            <h3>Limited Time Prefernce</h3>
            限时特惠推荐
        </div>
        <ul class="prefernce clearfix">
            <li class="img01">
                <a href="#"><img src="images/02_01.jpg" alt=""></a>
                <p class="text">清凉一夏海洋之旅</p>
                <p class="price">总价：￥2680.00</p>
            </li>
            <li class="img">
                <a href="#"><img class="img02" src="images/02_02.jpg" alt=""></a>
                <p class="text">浪漫红塘湾蜜月之旅</p>
                <p class="price">总价：￥2680.00</p>
            </li>
            <li>
                <a href="#"><img class="imgg03" src="images/02_03.jpg" alt=""></a>
                <p class="text">温馨爱琴海家庭之旅</p>
                <p class="price">总价：￥2680.00</p>
            </li>
        </ul>
    </div>
</section>
<!--footer-->
<footer class="clearfix">
    <div class="center">
        <div class="text_border">
            <p class="text01">
                <a href="#">积分规则</a>
                <a href="#">常见问题</a>
                <a href="#">订购流程</a>
                <a href="#">汇款方式</a>
                <a href="#">酒店动态</a>
                <a href="#">媒体报道</a>
                <a class="noborder" href="#">联系我们</a>
            </p>
        </div>
        <p class="text02">地址/address：三亚市天涯区红塘湾旅游度假村177号 邮编/P .C .:572000</p>
        <P class="text03">&copy; htwianuguo.com ALL Rights Reserved</P>
    </div>
</footer>
</body>
</html>